<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Form - C&ocirc;ng Ty TNHH MTV Du Lịch Sinh Th&aacute;i Quốc Tế</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/article.css">
	<!-- CSS cần cho form style -->
	<link rel="stylesheet" type="text/css" href="css/form.css">
	<!-- -->
	<!-- CSS cho datepicker-->
	<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	  google.load("jquery", "1.7");
	</script>

	

	<!-- Những plugin này cần cho combobox -->
	<script type="text/javascript" src="js/scrollpane.js"></script>
	<script type="text/javascript" src="js/mouse-wheel.js"></script>
	
	<script type="text/javascript" src="js/combobox.js"></script>
	<!-- -->
	<!-- Plugin này cần cho Checkbox và Radio button -->
	<script type="text/javascript" src="js/customize-forms.js"></script>
	<!-- -->
	<!-- Dùng cho datepicker -->
	<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
	<!-- -->

	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/form.js"></script>
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="css/iefix.css">
	<![endif]-->
</head>
<body>
	<div class="OuterWrapper">
		<div class="Header InnerWrapper">
			<h1 class="Logo vi">
				<a href="#" title="Khu du lịch sinh thái Quốc Tế">Khu du lịch sinh thái Quốc Tế</a>
			</h1>
			<p class="Slogan vi">
				Môi trường xanh và thân thiện của bạn - Your green and friendly environment
			</p>
			<img src="images/banner.jpg" height="275" width="999" alt="C&ocirc;ng Ty TNHH MTV Du Lịch Sinh Th&aacute;i Quốc Tế" class="Banner">
			<div class="Language">
				<h2>Language</h2>
				<ul>
					<li><a href="#" class="en">English</a></li>
					<li><a href="#" class="vi">Tiếng Việt</a></li>
				</ul>
			</div>
		</div> <!-- OuterHeader -->
		<div class="Nav">
			<ul class="NavList HoverStyle1">
				<li><a href="homepage.html">Trang chủ</a></li>
				<li><a href="#">Quốc Tế Resort</a></li>
				<li><a href="#">Khu vui chơi &amp; giải trí</a></li>
				<li><a href="#">Bản đồ</a></li>
				<li><a href="#">Thông tin sự kiện</a></li>
				<li><a href="#">Hình ảnh &amp; Video</a></li>
				<li><a href="#" class="current">Liên hệ</a></li>
			</ul>
			<div class="Hover">
				<div class="LeaveLeft"></div>
				<div class="LeaveRight"></div>
				<div class="ItemSpan"></div>
			</div>
		</div> <!-- Nav -->
		<div class="InnerWrapper">
			<div class="Body">
				<div class="LeftSidebar">
					<div class="LeftInner">
						<h2>Left Sidebar</h2>
						<div class="Widget">
							<h3>Danh sách tour</h3>
							<ul>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
							</ul>
						</div>
						<div class="Widget">
							<h3>Danh sách tour</h3>
							<ul>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
							</ul>
						</div>
						<div class="Widget Style2">
							<h3>Danh sách tour</h3>
							<ul>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
							</ul>
						</div>
						<div class="Widget Style2">
							<h3>Danh sách tour</h3>
							<ul>
								<li>Lượng truy cập trong ngày: 20000000</li>
								<li>Lượng truy cập trong ngày: 20000</li>
								<li>Lượng truy cập trong ngày: 20000</li>
								<li>Lượng truy cập trong ngày: 20000</li>
								<li>Lượng truy cập trong ngày: 20000</li>
							</ul>
						</div>
					</div>
				</div> <!-- LeftSidebar -->
				<div class="MainContent">
					<h2>Hướng dẫn style cho form</h2>
					<div class="FormWrap">
						<p class="ContentText">
							1. Cấu trúc cơ bản cho 1 form: <br /> 
							form tag > .FormWrap > .FormRow > label.LabelStyle và .ControlWrap <br />
							<strong>Lưu ý:</strong> đối với form row nào chứa checkbox hoặc radio thì .ControlWrap phải thêm class "RadioWrap"
						</p>
						<p class="ContentText">
							2. Cách style các input: <br />
							- Thông báo lỗi: sử dụng p.ErrorMsg
							<br />- TextBox: thêm class "TextBox", có 3 kích thước dành cho textbox: Long, Medium, Short, 
							sử dụng class với tên tương ứng để apply size đó. Ví dụ: <input type="text" name="username" id="username" class="TextBox Long"><br />Sử dụng class "Error" để báo lỗi cho textbox
							<br />- TextArea, Button: sử dụng class "TextArea" và "Button"
							<br />- ComboBox: đầu tiên, khai báo những class sau cho tag select: "ThemeComboBox" + 1 trong 4 class "ThemeLong", "ThemeMedium", "ThemeShort", "ThemeShorter" tương ứng với 4 size. Sau đó gán plugin cho ComboBox đó trong js file (dùng class riêng hoặc ID để gọi), 
							<br />ví dụ: $('#yourComboBoxID').combobox({scrollbarWidth: '10px'});
							<br /> để hiện thị 1 combobox bị lỗi, add class "Error" cho div.ControlWrap là cha của combobox đó.
							<br />- Radio và Checkbox: Đầu tiên gán class "RadioStyle"/"CheckBoxStyle" cho thẻ LABEL của radio/checkbox đó. Sau đó
							trong file js, <br /> ** Đối với Radio, gọi $('#YourRadioID1, #YourRadioID2').radioGroup({
								changeHandler: cBRadio1,
								activeClass: "RadioStyleActive"
							}) 
							<br />** Đối với Checkbox gọi $('#YourCheckBoxID').checkbox({
		changeHandler: cBCheckBox1,
		activeClass: "CheckBoxStyleActive"
	});
	<br /><a href="js/form.js">Xem thêm về cách sử dụng combobox, checkbox, radio tại đây</a>
	<br />** Khi submit form, value của các control sẽ được lấy như bình thường.
						</p>
					</div>
					<h2>Đăng ký</h2>
					<form action="get" id="myForm">
						<div class="FormWrap">
							<div class="FormRow">
								<label for="txtLong" class="LabelStyle">Long textbox:</label>
								<div class="ControlWrap"><input type="text" name="txtLong" id="txtLong" class="TextBox Long">
								</div>
							</div>
							<div class="FormRow">
								<label for="txtLongError" class="LabelStyle">Long textbox (error):</label>
								<div class="ControlWrap"><input type="text" class="TextBox Long Error" name="txtLongError" id="txtLongError"><p class="ErrorMsg">This is example of error message</p></div>
							</div>
							<div class="FormRow">
								<label for="txtMedium" class="LabelStyle">Medium textbox:</label>
								<div class="ControlWrap"><input type="text" name="txtMedium" id="txtMedium" class="TextBox Medium"></div>
							</div>
							<div class="FormRow">
								<label for="txtShort" class="LabelStyle">Short textbox:</label>
								<div class="ControlWrap"><input type="text" name="txtShort" id="txtShort" class="TextBox Short"></div>
							</div>
							<div class="FormRow">
								<label for="dtp1" class="LabelStyle">Datepicker:</label>
								<div class="ControlWrap"><input type="text" name="dtp1" id="dtp1" class="TextBox Short"></div>
							</div>
							<div class="FormRow">
								<label for="slLong" class="LabelStyle">Long Combobox:</label>
								<div class="ControlWrap">
									<select name="slLong" id="slLong" class="SelectUI ThemeComboBox ThemeLong">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>

									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="slMedium" class="LabelStyle">Medium Combobox:</label>
								<div class="ControlWrap">
									<select name="slMedium" id="slMedium" class="SelectUI ThemeComboBox ThemeMedium">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="slShort" class="LabelStyle">Short Combobox:</label>
								<div class="ControlWrap">
									<select name="slShort" id="slShort" class="SelectUI ThemeComboBox ThemeShort">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="slLongError" class="LabelStyle">Long Combobox (error):</label>
								<div class="ControlWrap Error">
									<select name="slLongError" id="slLongError" class="SelectUI ThemeComboBox ThemeLong">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>	
									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="slMediumError" class="LabelStyle">Medium Combobox (error):</label>
								<div class="ControlWrap Error">
									<select name="slMediumError" id="slMediumError" class="SelectUI ThemeComboBox ThemeMedium">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
							</div>
							
							<div class="FormRow">
								<label for="slShortError" class="LabelStyle">Short Combobox (error):</label>
								<div class="ControlWrap Error">
									<select name="slShortError" id="slShortError" class="SelectUI ThemeComboBox ThemeShort">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="slShorter" class="LabelStyle">Shorter Combobox:</label>
								<div class="ControlWrap Short">
									<select name="slSorter" id="slSorter" class="SelectUI ThemeComboBox ThemeShorter ">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
								<div class="ControlWrap Short Error">
									<select name="slSorterError" id="slSorterError" class="SelectUI ThemeComboBox ThemeShorter Error">
										<option value="1">option 1</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
										<option value="3">option 3</option>
										<option value="2">option 2</option>
										<option value="3">option 3</option>
									</select>
								</div>
							</div>
							<div class="FormRow">
								<label for="chk1" class="LabelStyle">Checkbox:</label>
								<div class="ControlWrap RadioWrap">
									<input value="chk1" checked="true" type="checkbox" name="chk1" id="chk1" class="CheckBoxUI">
									<label for="chk1" class="CheckBoxStyle" >Checked</label>
									<input value="chk2" type="checkbox" name="chk2" id="chk2" class="CheckBoxUI">
									<label for="chk2" class="CheckBoxStyle">Uncheck</label>
								</div>
							</div>
							<div class="FormRow">
								<label for="rad1" class="LabelStyle">Radio:</label>
								<div class="ControlWrap RadioWrap">
									<input value="radValue1" type="radio" name="radio1" id="rad1" checked="checked" class="RadioUI">
									<label for="rad1" class="RadioStyle" >Checked</label>
									<input value="radValue2" type="radio" name="radio1" id="rad2" class="RadioUI">
									<label for="rad2" class="RadioStyle">Uncheck</label>
								</div>
							</div>
							<div class="FormRow">
								<label for="txtTextArea" class="LabelStyle">Textarea:</label>
								<div class="ControlWrap"><textarea name="txtTextArea" id="txtTextArea" class="TextArea" cols="30" rows="10"></textarea></div>
							</div>
							<div class="FormRow">
								<input type="submit" value="This is button" id="btnSubmit" class="Button">
							</div>
						</div> <!-- .FormWrap -->
						
					</form>
					
					<div class="FormWrap">
						<table class="MyTable">
							<tr>
								<th>Monday</th>
								<th>Tuesday</th>
								<th>Wednesday</th>
								<th>Thursday</th>
								<th>Friday</th>
							</tr>
							<tr>
								<td>One</td>
								<td>Two</td>
								<td>Three</td>
								<td>Four</td>
								<td>Five</td>
							</tr>
							<tr>
								<td>Six</td>
								<td>Seven</td>
								<td>Eight</td>
								<td>Nine</td>
								<td>Ten</td>
							</tr>
							<tr>
								<td rowspan="2">Eleven</td>
								<td>Twelve</td>
								<td>Thirteen</td>
								<td>Fourteen</td>
								<td>Fiveteen</td>
							</tr>
							<tr>
								<td>Seventeen</td>
								<td>Eighteen</td>
								<td>Nineteen</td>
								<td>Twenty</td>
							</tr>
							<tr>
								<td>This is very long long long text</td>
								<td>Seven</td>
								<td>Eight</td>
								<td>Nine</td>
								<td>Ten</td>
							</tr>
						</table>
					</div>
				</div> <!-- MainContent -->
				<div class="RightSidebar">
					<div class="RightAd"><a href="#"><img src="images/ad-1.jpg" height="225" width="220" alt="Ad 1"></a></div>
					<div class="RightAd"><img src="images/ad-2.jpg" height="225" width="220" alt="Ad 2"></div>
					<div class="RightAd"><img src="images/ad-3.jpg" height="225" width="220" alt="Ad 3"></div>
					<div class="RightAd"><img src="images/ad-4.jpg" height="225" width="220" alt="Ad 4"></div>
				</div> <!-- RightSidebar -->
				<div class="clear"></div>
			</div> <!-- Body -->
			<div class="Footer">
				<div class="FooterLeaves"></div>
				<div class="InnerFooter">
					<p class="FooterText"><strong>C&ocirc;ng Ty TNHH MTV Du Lịch Sinh Thái Quốc T&ecirc;́.</strong><br /> &Acirc;́p Sở Tại, Xã Thạnh Phú, Huy&ecirc;̣n Cái Nước, Tỉnh Cà Mau.<br /> Đi&ecirc;̣n Thoai: 08 - 3456789 <br />Fax: ttt@abc.com<br /> Email: quoctetravel@mail.com</p>
				</div>
			</div> <!-- Footer -->
		</div> <!-- InnerWrapper -->
	</div> <!-- OuterWrapper -->
</body>
</html>